<template>
  <view>
    <customtop top_title="分销后台"></customtop>
    <view class="box1">
      <view class="title">我的收益</view>
      <view class="price">
        <span>¥</span>{{user.distribution_earnings_total ? user.distribution_earnings_total : 0}}
      </view>
      <view class="btns">
        <span class="luckbtn luckbtn-payment btn1" @click="jumpPage('/pages/account/wallet')">提现</span>
      </view>
    </view>

    <view class="container">
      <view class="box2 pagebox">
        <view class="pagetop">
          <span class="title">我的团队：{{team_counts.c0 ? team_counts.c0 : 0}}人</span>
          <span class="more" @click="jumpPage('/pages/account/my_team');"><i class="iconfont icon-xiangyou-copy"></i></span>
        </view>
        <view class="bd" @click="jumpPage('/pages/account/my_team');">
          <view class="items">
            <view class="item">
              <view class="vw1 text-danger"><span>{{team_counts.c0 ? team_counts.c0 : 0}}</span>人</view>
              <view class="vw2">共邀请</view>
            </view>
            <view class="item">
              <view class="vw1 text-danger"><span>{{team_counts.c1 ? team_counts.c1 : 0}}</span>人</view>
              <view class="vw2">直邀人员</view>
            </view>
            <view class="item">
              <view class="vw1 text-danger"><span>{{team_counts.c2 ? team_counts.c2 : 0}}</span>人</view>
              <view class="vw2">间邀人员</view>
            </view>
          </view>
        </view>
      </view>

      <view class="box3 pagebox">
        <view class="pagetop">
          <span class="title">邀请方式</span>
        </view>
        <view class="bd">
          <view class="items">
            <button class="item item2" @click="jumpPage('/pages/account/poster_bg')">
              <i class="iconfont icon-pengyouquan"></i><span class="txt">转发海报</span>
            </button>
          </view>
        </view>
      </view>

      <view class="box4 pagebox">
        <view class="pagetop">
          <span class="title">代理身份</span>
        </view>
        <view class="bd">
          <view class="bdbox">
            <view class="vm1">当前身份：{{user.distribution ? user.distribution.name : ''}}</view>
            <view class="items">
              <uni-table border>
              	<uni-tr>
              		<uni-th align="left" width="50%">团队等级</uni-th>
                  <uni-th align="left" width="50%">收益比例</uni-th>
              	</uni-tr>
              	<uni-tr>
              		<uni-td>直邀人员</uni-td>
              		<uni-td>{{user.distribution ? ( user.distribution.rate1 * 100 ) : ''}}%</uni-td>
              	</uni-tr>
                <uni-tr>
                	<uni-td>间邀人员</uni-td>
                	<uni-td>{{user.distribution ? ( user.distribution.rate2 * 100 ) : ''}}%</uni-td>
                </uni-tr>
              </uni-table>
            </view>
            <view class="btns">
              <view class="msg">切换身份，获取更大收益</view>
              <view class="btn" @click="onPopupShow_fx"><u-button type="primary" text="切换身份"></u-button></view>
            </view>
          </view>
        </view>
      </view>

      <view class="box5 pagebox">
        <view class="pagetop">
          <span class="title">近期收益</span>
          <span class="more" @click="jumpPage('/pages/account/distribution_earnings')"><i class="iconfont icon-xiangyou-copy"></i></span>
        </view>
        <view class="bd" v-if="earnings.length == 0">
          <u-empty
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            text="近期暂无收益~"
          >
          </u-empty>
        </view>
        <view class="bd" v-if="earnings.length > 0">
          <view class="items">
          	<view class="item" v-for="(item, index) in earnings" :key="index">
          		<view class="info">
          			<view class="txt">{{item.description}}</view>
          			<view class="ident">+{{item.price}}</view>
          		</view>
          		<view class="date">{{item.created_at}}</view>
          	</view>
          </view>
          <view class="btns">
            <view class="btn" @click="jumpPage('/pages/account/distribution_earnings')"><u-button type="primary" text="查看更多"></u-button></view>
          </view>
        </view>
      </view>

      <view class="box6 pagebox">
        <view class="pagetop">
          <span class="title">规则说明</span>
        </view>
        <view class="bd">
          <rich-text :nodes="article.content"></rich-text>
        </view>
      </view>
    </view>

    <!-- 组件 start -->
    <u-popup
      :show="popupShow_fx"
      :round="10"
      mode="bottom"
      @close="onPopupClose_fx"
    >
      <view class="popup_fx">
        <view class="popup_fx_top">
          <view class="box">
            <view class="title">开通代理</view>
            <i class="iconfont icon-guanbi1 close" @click="onPopupClose_fx"></i>
          </view>
        </view>
        <view class="bd container">
          <view class="bdtitle">分成说明</view>
          <view class="items1">
            <uni-table border>
            	<uni-tr>
            		<uni-th align="left" width="33.33%">代理级别</uni-th>
                <uni-th align="left" width="33.33%">直邀提成</uni-th>
                <uni-th align="left" width="33.33%">间邀提成</uni-th>
            	</uni-tr>
            	<uni-tr v-for="(item, index) in config.distribution" :key="index">
            		<uni-td>{{item.name}}</uni-td>
            		<uni-td>{{item.rate1 * 100}}%</uni-td>
                <uni-td>{{item.rate2 * 100}}%</uni-td>
            	</uni-tr>
            </uni-table>
          </view>
          <view class="bdtitle">代理价格</view>
          <view class="items2">
            <view
              class="item"
              :class="current_distribution_level == item.level ? 'on' : ''"
              v-for="(item, index) in config.distribution"
              :key="index"
              v-if="item.level > 1"
              @click="setDistributionLevel(item.level)"
            >
              <view class="item_box">
                <view class="price"><span>¥</span>{{item.price}}</view>
                <view class="des">{{item.name}}</view>
              </view>
            </view>
          </view>
          <view class="bdtitle">支付方式</view>
          <view class="payment">
            <view class="items">
              <view class="item" :class="payment_way == 'weixinpay' ? 'on' : ''" @click="setPaymentWay('weixinpay')">
                <view class="left">
                  <image class="icon" src="/static/images/icon_weixinpay.png" />
                  <span class="txt">微信支付</span>
                </view>
                <i class="iconfont icon-yuanxingweixuanzhong"></i>
              </view>
              <view class="item" :class="payment_way == 'alipay_wap' ? 'on' : ''" @click="setPaymentWay('alipay_wap')">
                <view class="left">
                  <image class="icon" src="/static/images/icon_alipay.png" />
                  <span class="txt">支付宝支付</span>
                </view>
                <i class="iconfont icon-yuanxingweixuanzhong"></i>
              </view>
              <view class="item" :class="payment_way == 'wallet' ? 'on' : ''" @click="setPaymentWay('wallet')">
                <view class="left">
                  <image class="icon" src="/static/images/icon_wallet.png" />
                  <span class="txt">余额支付</span>
                </view>
                <i class="iconfont icon-yuanxingweixuanzhong"></i>
              </view>
            </view>
          </view>
          <view class="btns" v-if="systemInfo.platform != 'ios' || config.wxapp.ios_pay_status == 1">
            <view class="btn"><u-button type="primary" text="确认开通" @click="payFun"></u-button></view>
          </view>
          <view
            :style="{ marginTop: '20px', marginBottom: '20px', textAlign: 'center' }"
            v-if="systemInfo.platform == 'ios' && config.wxapp.ios_pay_status == 0"
          >
            功能暂时不能使用
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 组件 end -->
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import util from "@/utils/util.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      user: {},
      team_counts: {},
      earnings: [],
      popupShow_fx: false,
      current_distribution_level: '',
      article: {},
      payment_way: 'weixinpay',
      config: {
        distribution: [],
        wxapp: {}
      },
    }
  },

  onLoad: function() {
    uni.showLoading();
    this.getConfig();
    this.getTeamCounts();
    this.getDistributionEarnings();
    this.getArticle();
    let that = this;
    uni.getSystemInfo({
      success (res) {
        that.systemInfo = res;
      }
    })
    that.systemInfo.platform = 'h5';
  },

  onShow: function() {
    this.getUser();
  },

  methods: {
    onShareAppMessage() {
      let path = '/pages/index/index?invite_code=' + this.user.id;
      return {
        title: '好友给你分享了一个找群平台',
        path: path
      }
    },

    getConfig: function() {
      request.post('/common/getConfig').then(res => {
        this.config = res.data;
      })
    },

    getUser: function() {
      request.post('/user/getLoginUser').then(res => {
        uni.hideLoading();
        this.user = res.data;
      })
    },

    getTeamCounts: function() {
      request.post('/user/getTeamCounts').then(res => {
        this.team_counts = res.data;
      })
    },

    setDistributionLevel: function(level) {
      this.current_distribution_level = level;
    },

    payFun: function() {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确认支付？',
        success (res) {
          if (res.confirm) {
            uni.showLoading();
						let params = { level: that.current_distribution_level };
            let payment_way = that.payment_way;
            // 微信内打开
            if (payment_way == 'weixinpay') {
              if (util.is_wx()) {
                payment_way = 'weixinpay_jsapi_wxmp';
              } else {
                payment_way = 'weixinpay_h5';
              }
            }
            params.payment_way = payment_way;
            request.post('/payment/pay_distribution', params).then((res) => {
              uni.hideLoading();
              if (res.code == 400) {
                uni.showToast({ title: res.message, icon: 'none' });
                return false;
              }
              if (payment_way == 'alipay_wap') {
                document.querySelector('body').innerHTML = res.data;
                document.forms[0].submit();
              }
              if (payment_way == 'weixinpay_h5') {
                window.location.href = res.data.url;
              }
              if (payment_way == 'weixinpay_jsapi_wxmp') {
                that.onBridgeReady(res.data.jsApiParams);
              }
              if (payment_way == 'wallet') {
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 1500,
									success: function () {
										that.getUser();
                    that.onPopupClose_fx();
									}
								});
							}
            });
          }
        }
      })
    },

    onBridgeReady: function(jsApiParams) {
      let that = this;
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: jsApiParams.timeStamp,
        nonceStr: jsApiParams.nonceStr,
        package: jsApiParams.package,
        signType: jsApiParams.signType,
        paySign: jsApiParams.paySign,
      	success: function (res) {
      		uni.showToast({
      		  title: '支付成功',
      		  icon: 'success',
      		  duration: 1500,
      		  success: function () {
      		    that.getUser();
              that.onPopupClose_fx();
      		  }
      		});
      	},
      	fail: function (res) {
          if (res.errMsg == 'requestPayment:fail cancel') {
            uni.showToast({ title: '取消支付', icon: 'none' });
          } else {
            uni.showToast({ title: '支付失败', icon: 'error' });
          }
      		console.log('fail:' + JSON.stringify(res));
      	}
      });
    },

    setPaymentWay: function(payment_way) {
      this.payment_way = payment_way;
    },

    getDistributionEarnings: function() {
      request.post('/user/getDistributionEarnings').then(res => {
        this.loading = false;
        this.earnings = res.data;
      })
    },

    onPopupShow_fx: function() {
      this.popupShow_fx = true;
    },

    onPopupClose_fx: function() {
      this.popupShow_fx = false;
    },

    getArticle: function() {
      request.post('/article/getArticle_assign', {type: 'distribution'}).then(res => {
        let content = res.data.content;
        content = content.replace(/<img/gi, '<img style="max-width:100%; height:auto;"');
        res.data.content = content;
        this.article = res.data;
      })
    },

    switchTab: function(url) {
      uni.switchTab({ url: url })
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style>
page {
  padding-bottom: 50rpx;
  background-color: #fff;
}

.box1 {
  background: linear-gradient(to bottom right, #38b7ee, #198754);
  color: #fff;
  text-align: center;
  padding: 80rpx 0;
}
.box1 .title {
  font-size: 40rpx;
  margin-bottom: 8px;
  font-weight: 600;
}
.box1 .price {
  font-size: 36rpx;
}
.box1 .price span {
  font-size: 24rpx;
  margin-right: 3px;
}
.box1 .btns {
	margin-top: 30rpx;
  display: flex;
  justify-content: center;
}
.box1 .btns .luckbtn {
	width: 200rpx;
  margin: 0 5px;
}

.box2 .items {
  background-color: #eee;
  border-radius: 3px;
  display: flex;
}
.box2 .items .item {
  width: 33.33%;
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
.box2 .items .item .vw1 span {
  font-size: 48rpx;
  font-weight: 600;
  margin-right: 5px;
}
.box2 .items .item .vw2 {
  color: #999;
  font-size: 28rpx;
  margin-top: 5px;
}

.box3 .items {
  display: flex;
  justify-content: space-between;
}
.box3 .items .item {
  width: 100%;
  background-color: #1AAD19;
  color: #fff;
  text-align: center;
}
.box3 .items .item .iconfont {
  margin-right: 6px;
}
.box3 .items .item2 {
  background-color: #0d6efd;
}

.box4 .bd {
  margin: 0 auto;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
}
.box4 .bdbox {
  padding: 30rpx;
}
.box4 .bd .vm1 {
  margin-bottom: 30rpx;
}
.box4 .bd .uni-table-th {
  background-color: #d8b66c;
  color: #fff;
}
.box4 .bd .items {
  margin-bottom: 30rpx;
}
.box4 .bd .btns .msg {
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
}

.box5 .bd {
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  padding: 30rpx;
}
.box5 .items {
  margin-bottom: 30rpx;
}
.box5 .items .item {
	border-bottom: 1px solid #f5f5f5;
  padding-bottom: 30rpx;
  margin-bottom: 30rpx;
}
.box5 .items .info {
	overflow: hidden;
}
.box5 .items .info .txt {
	float: left;
  max-width: 80%;
}
.box5 .items .info .ident {
	float: right;
	color: #61e7ce;
	font-weight: 600;
}
.box5 .items .item .date {
	font-size: 24rpx;
	color: #999;
	margin-top: 5px;
}

.box6 .bd {
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  padding: 30rpx;
}

.pagebox {
  margin-top: 40rpx;
}
.pagebox .pagetop {
  margin-bottom: 30rpx;
}
.pagebox .pagetop .title {
  font-weight: 600;
  position: relative;
  padding-left: 26rpx;
}
.pagebox .pagetop .title::before {
  position: absolute;
  top: 10rpx;
  left: 0;
  width: 10rpx;
  height: 20rpx;
  border-radius: 32rpx;
  background: #00B38A;
  content: '';
}
.pagebox .pagetop .more {
  float: right;
  color: #999;
  font-size: 24rpx;
  padding-top: 5px;
}

.popup_fx {
  padding-bottom: 30rpx;
  font-size: 14px;
}
.popup_fx_top {
	width: 100%;
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
}
.popup_fx_top .box {
	position: relative;
}
.popup_fx_top .box .title {
	letter-spacing: 2px;
}
.popup_fx_top .box .close {
	position: absolute;
  top: 0;
	right: 40rpx;
	height: 90rpx;
	line-height: 90rpx !important;
	color: #999;
}
.popup_fx .bd .items1 {
  margin-top: 10px;
}
.popup_fx .bd .uni-table-th {
  background-color: #d8b66c;
  color: #fff;
}
.popup_fx .bd .items2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30rpx;
  margin-bottom: -30rpx;
}
.popup_fx .bd .items2 .item {
  width: 31%;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  text-align: center;
  padding: 30rpx 0;
  margin-bottom: 30rpx;
}
.popup_fx .bd .items2 .item.on {
  border: 1px solid #d8b66c;
}
.popup_fx .bd .items2 .item .price {
  font-size: 40rpx;
  color: #d8b66c;
  margin-bottom: 10px;
}
.popup_fx .bd .items2 .item .price span {
  font-size: 12px;
}
.popup_fx .btns {
  margin-top: 30rpx;
}
.popup_fx .bdtitle {
  margin-top: 30rpx;
}
</style>
